<template>
  <a-card :bordered="false">
    <div class="company-logo">
      <img :src="imgSrc">
      <!-- <a-upload
        name="file"
        :multiple="false"
        :accept="accept"
        :showUploadList="false"
        class="uploadFile"
        :beforeUpload="uploadPic">
        <a-button style="width:100px;height:100px"><a-icon type="upload"/>上传</a-button>
      </a-upload> -->
    </div>
    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="名称">
            <a-input placeholder="请输入名称" v-decorator="['name', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="性别">
            <a-select placeholder="请输入名称" v-decorator="['sex', {}]" >
              <a-select-option :value="1">男</a-select-option>
              <a-select-option :value="2">女</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="微信号">
            <a-input placeholder="请输入微信号" v-decorator="['weChat', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="手机号">
            <a-input placeholder="请输入手机号" disabled v-decorator="['mobile', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="邮箱">
            <a-input placeholder="请输入邮箱" v-decorator="['email', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="所属公司">
            <a-input v-show placeholder="请选择所属公司"  v-decorator="[ 'companyId', {}]" />
            <a-input placeholder="请选择所属公司" @click="showCommonModal" v-decorator="[ 'companyName', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="职位">
            <a-input placeholder="请输入职位" v-decorator="['job', {}]" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="所处行业">
            <a-input placeholder="请输入所处行业" disabled v-decorator="['industry', {}]" />
          </a-form-item>
        </a-col> -->
        
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="关注领域">
            <a-input placeholder="请选择关注领域" v-show v-decorator="['industryId', {}]" />
            <a-input placeholder="请选择关注领域" @click="showCommonModalLabel" v-decorator="['industryName', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="座右铭">
            <a-input placeholder="请输入一句话简介，座右铭" v-decorator="['theme', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="special-action"
            label="操作">
            <a-button type="primary" @click="submitData">提交</a-button>
          </a-form-item>
        </a-col>

      </a-row>
    </a-form>

    <!-- 表单区域 -->
    <tcUser-modal ref="modalForm" @ok="modalFormOk"></tcUser-modal>
    <commonModal
      modalTitle="请选择"
      ref="commonModal"
      @getCommonModalData="getCommonModalData"
      :columns="modalColumns"
      apiUrl="tc/company/list"
      :searchArr="searchArr"></commonModal>

      <commonModal
      modalTitle="请选择"
      ref="commonModalLabel"
      selectType="checkbox"
      @getCommonModalData="getCommonModalDataLabel"
      :columns="modalColumnsLabel"
      apiUrl="tc/label/list?type=1"
      :searchArr="searchArrLabel"></commonModal>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import TcUserModal from './modules/TcUserModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { httpAction,postAction } from '@/api/manage'
  import commonModal from '@/components/commonModal'
  import pick from 'lodash.pick'
  export default {
    name: "TcUserList",
    mixins:[JeecgListMixin],
    components: {
      TcUserModal,commonModal
    },
    data () {
      return {
        labelIds:[],
        searchArr: [
            { label: '关键字搜索', key: 'name' }
        ],
        modalColumns: [
            { title: '名称', dataIndex: 'name' },
            { title: '当前轮次', dataIndex: 'financeStage' },
            { title: '简介', dataIndex: 'theme' }
        ],
        searchArrLabel: [
            { label: '关键字搜索', key: 'label' }
        ],
        modalColumnsLabel: [
            { title: '名称', dataIndex: 'label' },
        ],
        accept:'image/*',
        form: this.$form.createForm(this),
        description: '客户管理管理页面',
        imgSrc:'',
        model:{},
        // 表头
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
    		url: {
              list: "/tc/tcUser/list",
              delete: "/tc/tcUser/delete",
              deleteBatch: "/tc/tcUser/deleteBatch",
              exportXlsUrl: "tc/tcUser/exportXls",
              importExcelUrl: "tc/tcUser/importExcel",
              updateFile:'/test'
           },
        }
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  created(){
    this.getData();
  },
    methods: {
      uploadPic(fileObj){
        let httpurl = this.url.updateFile;
        let formData = new FormData();
        formData.append('file',fileObj)
        let that = this;
        postAction(httpurl,formData).then((res)=>{
          if(res.success){
            that.$message.success('上传成功');
            that.form.setFieldsValue({
                    accessoryUrl: res.message,
                })
            this.fileList = [];
            this.fileList.push({name:fileObj.name})
            console.log('ssss',this.fileList)
          }else{
            that.$message.warning(res.message);
          }
          that.confirmLoading = false;
        }).catch(() => {
          that.confirmLoading = false;
          // that.close();
        })
        return false;
      },
      showCommonModal () {
          this.$refs.commonModal.open()
      },
      getCommonModalData(val){
        if (val.length > 0) {
              console.log('数组第一个对象', val[0])
              this.form.setFieldsValue({
                  companyId: val[0].id,
                  companyName: val[0].name,
              })
          }
      },
      showCommonModalLabel () {
          this.$refs.commonModalLabel.open()
      },
      getCommonModalDataLabel(val){
        if (val.length > 0) {
              console.log('数组第一个对象', val[0])
              let labelsName = [];
              this.labelIds = [];
              val.forEach((e)=>{
                this.labelIds.push(e.id);
                labelsName.push(e.label)
              })
              this.form.setFieldsValue({
                  industryName: labelsName.join(','),
              })
          }
      },
      getData(){

        let httpurl = '/tc/tcUser/queryById';
        let method = 'get';
        
        let formData = {};
        //时间格式化
        
        console.log(formData)
        let id = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')).id:'';
        httpurl = httpurl+'?id='+id;
        
        httpAction('/tc/tcUser/labels?userId='+id,{},'get').then((res)=>{
          if(res.success){
            let data = res.result?res.result:[];
            this.labelIds = [];
            let labelsName = [];
            data.forEach((e)=>{
              labelsName.push(e.name)
              this.labelIds.push(e.labelId)
            })
            httpAction(httpurl,{},method).then((res)=>{
              if(res.success){
                // this.model = res.result
                this.form.resetFields();
                this.model = Object.assign({}, res.result);
                this.$nextTick(() => {
                  this.imgSrc = this.model.imgPath;
                  this.model.industryName = labelsName.join(',')
                  this.form.setFieldsValue(pick(this.model,'imgPath','companyId','companyName','email','name','theme','sex','mobile','miniOpenid','job','weChat','industryName'))
                  //时间格式化
                });
                // that.$emit('ok');
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              // that.confirmLoading = false;
              // that.close();
            })
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {

        })
      },
      submitData(){
        let httpurl = '/tc/tcUser/edit';
        let method = 'put';
        
        let row = this.form.getFieldsValue();
        //时间格式化

        let formData = Object.assign({},row)
        console.log(formData)
        formData.id = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')).id:'';
        formData.imgPath = this.imgSrc;
        
        httpAction('/tc/label/bindUserModel',{labelIds:this.labelIds,userId:formData.id},'post').then((res)=>{
          if(res.success){
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                let json = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):{};
                json.companyId = formData.companyId;
                json.companyName = formData.companyName;
                localStorage.setItem('userInfo',JSON.stringify(json));
                this.$message.success(res.message);
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
            })
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          // that.confirmLoading = false;
          // that.close();
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  .company-logo{
    width: 100px;
    margin:20px auto;
    position: relative;
  }
  .company-logo img{
    width: 100%;
    border-radius: 50%;
  }
  .uploadFile{
    position: absolute;
    width:100%;
    height: 100%;
    left: 0px;
    top:0px;
    opacity: 0;
  }
</style>